import 'package:toggle_switch/toggle_switch.dart';

import 'package:flutter/material.dart';

void main() => runApp(KaterialApp());

class KaterialApp extends StatefulWidget {
  @override
  _KaterialApp createState() => _KaterialApp();
}

class _KaterialApp extends State<KaterialApp>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this); // 假设我们有3个标签页
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: '整体标题',

      home: new Scaffold(
        backgroundColor: Color(0xFF3b3633),
        body: DefaultTabController(
          length: 2, // This is the number of tabs.
          child: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              // These are the slivers that show up in the "outer" scroll view.
              return <Widget>[
                SliverOverlapAbsorber(
                  handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                    context,
                  ),
                  sliver: SliverAppBar(
                    leading: new IconButton(
                      icon: Icon(Icons.arrow_back),
                      onPressed: () {},
                    ),
                    title: const Text('线上博物馆'),
                    centerTitle: true,
                    pinned: true,
                    floating: false,
                    snap: false,
                    primary: true,
                    expandedHeight: 560.0,
                    backgroundColor: Color(0xFF3b3633),
                    elevation: 10,
                    //是否显示阴影，直接取值innerBoxIsScrolled，展开不显示阴影，合并后会显示
                    forceElevated: innerBoxIsScrolled,

                    actions: <Widget>[
                      new IconButton(
                        icon: Icon(Icons.more_horiz),
                        onPressed: () {
                          print("更多");
                        },
                      ),
                      new IconButton(
                        icon: Icon(Icons.more_horiz),
                        onPressed: () {
                          print("更多");
                        },
                      ),
                    ],

                    flexibleSpace: new FlexibleSpaceBar(
                      // title: new Text("标题标题标题2"),
                      // centerTitle: true,
                      // collapseMode: CollapseMode.pin,
                      background: Image.network(
                        "https://qcloud.dpfile.com/pc/DDWGjKfIBa0ovE_q9irdz8mJOKlj38cnQoucBcqa1B5wZwAQiLc-vyQVloJWeP-b.jpg",
                        fit: BoxFit.fill,
                      ),

                      // background:
                      // Image(
                      //   image: AssetImage("images/banner.jpg"),
                      //   // image: AssetImage("images/banner2.png"),
                      //   // width: 300,
                      //   // height: 300,
                      //   fit: BoxFit.cover,
                      // ),

                      // Image.asset("images/banner.jpg", fit: BoxFit.fill),
                    ),

                    bottom: MyCustomPreferredSizeWidget(
                      message: _tabController,
                    ),
                  ),
                ),
              ];
            },
            body: TabBarView(
              controller: _tabController,
              // These are the contents of the tab views, below the tabs.
              children: [
                SafeArea(
                  top: false,
                  bottom: false,
                  child: Builder(
                    builder: (BuildContext context) {
                      return CustomScrollView(
                        key: Key('menu1'),
                        slivers: <Widget>[
                          SliverOverlapInjector(
                            handle:
                                NestedScrollView.sliverOverlapAbsorberHandleFor(
                                  context,
                                ),
                          ),
                          SliverToBoxAdapter(
                            child: Card(
                              elevation:0, // 阴影
                              color: Color(0xffF2EFE7),
                              margin: EdgeInsets.symmetric(
                                horizontal: 12.0,
                                vertical: 10.0,
                              ),
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(16.0),
                              ),
                              child: Container(
                                padding: EdgeInsets.all(16.0),
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Flex(
                                      direction: Axis.horizontal,
                                      //方向 Axis.horizontal横向 Axis.vertical竖向
                                      children: <Widget>[
                                        Expanded(
                                          //Flex下的Expanded必定参与等分，有Expanded标签，里边就必有flex属性
                                          flex: 1,
                                          child: Text(
                                            '热点话题',
                                            style: TextStyle(
                                              color: Color(0xffCD4F46),
                                              fontSize: 16,
                                              fontWeight: FontWeight.bold,
                                            ),
                                          ),
                                        ),

                                        GestureDetector(
                                          onTap: () {
                                            // 点击事件的处理代码
                                            print("Container 被点击了！");
                                          },
                                          child: Container(
                                            // Container不参数等分，剩余宽度按比例分配
                                            // width: 100,
                                            // color: Colors.black,
                                            child: Text(
                                              '查看更多热点',
                                              style: TextStyle(
                                                color: Color(0xff222B38),
                                                fontSize: 11,
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                          ),
                                        ),

                                        GestureDetector(
                                          onTap: () {
                                            // 点击事件的处理代码
                                            print("Container 被点击了！");
                                          },
                                          child: Container(
                                            width: 18,
                                            height: 18,
                                            margin: EdgeInsets.only(left: 5.0),
                                            padding: const EdgeInsets.all(0.0),
                                            decoration: BoxDecoration(
                                              color: Colors.white, // 设置背景颜色
                                              borderRadius:
                                                  BorderRadius.circular(
                                                    12,
                                                  ), // 圆角
                                            ),
                                            child: Icon(
                                              Icons.arrow_forward_ios,
                                              size: 10.0,
                                              color: Color(0xff222B38),
                                            ),
                                            // onPressed: () {}
                                          ),
                                        ),
                                        // IconButton(
                                        //   icon: Icon(Icons.arrow_forward_ios,size: 10.0),
                                        //   onPressed: () {},
                                        // ),
                                      ],
                                    ),

                                    Flex(
                                      direction: Axis.horizontal,
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      //方向 Axis.horizontal横向 Axis.vertical竖向
                                      children: <Widget>[
                                        Expanded(
                                          //Flex下的Expanded必定参与等分，有Expanded标签，里边就必有flex属性
                                          flex: 1,

                                          child: Container(
                                            alignment: Alignment.centerLeft,
                                            child: Chip(
                                              avatar: CircleAvatar(
                                                radius: 10,
                                                backgroundColor: Colors.red,
                                                child: Text(
                                                  '1',
                                                  style: TextStyle(
                                                    // 设置文字样式
                                                    color: Colors.white,
                                                    // 设置文字颜色为白色
                                                    fontSize: 10.5, // 设置文字大小
                                                  ),
                                                ),
                                              ),
                                              backgroundColor: Color(
                                                0xffF2EFE7,
                                              ),
                                              label: Text('张韶涵怒怼范玮琪，双方经纪人打架'),
                                              labelPadding: EdgeInsets.only(
                                                left: 1.0,
                                              ),
                                              labelStyle: TextStyle(
                                                color: Color(0xff2B241D),
                                                fontSize: 14,
                                                fontWeight: FontWeight.normal,
                                              ),
                                              side: BorderSide.none,
                                            ),
                                          ),

                                          // Text("data")
                                        ),

                                        Container(
                                          child: Chip(
                                            avatar: Icon(
                                              Icons.local_fire_department_sharp,
                                              size: 16.0,
                                              color: Color(0xffF27655),
                                            ),
                                            backgroundColor: Color(0xffF2EFE7),
                                            label: Text(
                                              '987万',
                                              style: TextStyle(
                                                color: Color(0xff795635),
                                                fontSize: 12,
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                            labelPadding: EdgeInsets.only(
                                              left: 1.0,
                                            ),
                                            labelStyle: TextStyle(
                                              color: Color(0xff2B241D),
                                              fontSize: 14,
                                              fontWeight: FontWeight.normal,
                                            ),
                                            side: BorderSide.none,
                                          ),
                                        ),
                                      ],
                                    ),

                                    Wrap(
                                      spacing: 5, // 水平方向间距
                                      runSpacing: 0, //垂直方向间距
                                      alignment: WrapAlignment.start, // 中间对齐
                                      children: <Widget>[
                                        Chip(
                                          label: Text('就爱看这种现场啦'),
                                          labelStyle: TextStyle(
                                            color: Color(0xff55493F),
                                            fontSize: 12,
                                            fontWeight: FontWeight.normal,
                                          ),
                                          avatar: ClipOval(
                                            child: Image.network(
                                              'https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg',
                                              width: 20, // 调整头像大小
                                              height: 20, // 调整头像大小
                                              fit: BoxFit.cover, // 图片填充模式
                                            ),
                                          ),
                                          shape: RoundedRectangleBorder(
                                            borderRadius: BorderRadius.circular(
                                              22.0,
                                            ),
                                          ),
                                          side: BorderSide.none,
                                          backgroundColor: Color(0xffE4DDD2),
                                        ),
                                        Chip(
                                          label: Text('支持女神偶像的互殴'),
                                          labelStyle: TextStyle(
                                            color: Color(0xff55493F),
                                            fontSize: 12,
                                            fontWeight: FontWeight.normal,
                                          ),
                                          avatar: ClipOval(
                                            child: Image.network(
                                              'https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg',
                                              width: 20, // 调整头像大小
                                              height: 20, // 调整头像大小
                                              fit: BoxFit.cover, // 图片填充模式
                                            ),
                                          ),
                                          shape: RoundedRectangleBorder(
                                            borderRadius: BorderRadius.circular(
                                              22.0,
                                            ),
                                          ),
                                          side: BorderSide.none,
                                          backgroundColor: Color(0xffE4DDD2),
                                        ),
                                      ],
                                    ),


                                    Flex(
                                      direction: Axis.horizontal,
                                      mainAxisAlignment:
                                      MainAxisAlignment.start,
                                      crossAxisAlignment:
                                      CrossAxisAlignment.center,
                                      //方向 Axis.horizontal横向 Axis.vertical竖向
                                      children: <Widget>[
                                        Expanded(
                                          //Flex下的Expanded必定参与等分，有Expanded标签，里边就必有flex属性
                                          flex: 1,

                                          child: Container(
                                            alignment: Alignment.centerLeft,
                                            child:

                                            Chip(
                                              avatar: CircleAvatar(
                                                backgroundColor: Colors.red,
                                                child: Text(
                                                  '2',
                                                  style: TextStyle(
                                                    // 设置文字样式
                                                    color: Colors.white, // 设置文字颜色为白色
                                                    fontSize: 10.5, // 设置文字大小
                                                  ),
                                                ),
                                              ),
                                              backgroundColor: Color(0xffF2EFE7),
                                              label: Text('云南无人机组队飞至印度上空'),
                                              labelStyle: TextStyle(
                                                color: Color(0xff2B241D),
                                                fontSize: 14,
                                                fontWeight: FontWeight.normal,
                                              ),
                                              side: BorderSide.none,
                                            ),
                                          ),

                                          // Text("data")
                                        ),

                                        Container(
                                          child: Chip(
                                            avatar: Icon(
                                              Icons.local_fire_department_sharp,
                                              size: 16.0,
                                              color: Color(0xffF27655),
                                            ),
                                            backgroundColor: Color(0xffF2EFE7),
                                            label: Text(
                                              '329万',
                                              style: TextStyle(
                                                color: Color(0xff795635),
                                                fontSize: 12,
                                                fontWeight: FontWeight.normal,
                                              ),
                                            ),
                                            labelPadding: EdgeInsets.only(
                                              left: 1.0,
                                            ),
                                            labelStyle: TextStyle(
                                              color: Color(0xff2B241D),
                                              fontSize: 14,
                                              fontWeight: FontWeight.normal,
                                            ),
                                            side: BorderSide.none,
                                          ),
                                        ),
                                      ],
                                    ),



                                    Wrap(
                                      spacing: 5, // 水平方向间距
                                      runSpacing: 0, //垂直方向间距
                                      alignment: WrapAlignment.start, // 中间对齐
                                      children: <Widget>[
                                        Chip(
                                          label: Text('让新德里颤抖吧'),
                                          labelStyle: TextStyle(
                                            color: Color(0xff55493F),
                                            fontSize: 12,
                                            fontWeight: FontWeight.normal,
                                          ),
                                          avatar: ClipOval(
                                            child: Image.network(
                                              'https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg',
                                              width: 20, // 调整头像大小
                                              height: 20, // 调整头像大小
                                              fit: BoxFit.cover, // 图片填充模式
                                            ),
                                          ),
                                          shape: RoundedRectangleBorder(
                                            borderRadius: BorderRadius.circular(
                                              22.0,
                                            ),
                                          ),
                                          side: BorderSide.none,
                                          backgroundColor: Color(0xffE4DDD2),
                                        ),
                                        Chip(
                                          label: Text('有点意思'),
                                          labelStyle: TextStyle(
                                            color: Color(0xff55493F),
                                            fontSize: 12,
                                            fontWeight: FontWeight.normal,
                                          ),
                                          avatar: ClipOval(
                                            child: Image.network(
                                              'https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg',
                                              width: 20, // 调整头像大小
                                              height: 20, // 调整头像大小
                                              fit: BoxFit.cover, // 图片填充模式
                                            ),
                                          ),
                                          shape: RoundedRectangleBorder(
                                            borderRadius: BorderRadius.circular(
                                              22.0,
                                            ),
                                          ),
                                          side: BorderSide.none,
                                          backgroundColor: Color(0xffE4DDD2),
                                        ),
                                        Chip(
                                          label: Text('买点咖喱'),
                                          labelStyle: TextStyle(
                                            color: Color(0xff55493F),
                                            fontSize: 12,
                                            fontWeight: FontWeight.normal,
                                          ),
                                          avatar: ClipOval(
                                            child: Image.network(
                                              'https://desk-fd.zol-img.com.cn/t_s960x600c5/g6/M00/03/0E/ChMkKWDZLXSICljFAC1U9uUHfekAARQfgG_oL0ALVUO515.jpg',
                                              width: 20, // 调整头像大小
                                              height: 20, // 调整头像大小
                                              fit: BoxFit.cover, // 图片填充模式
                                            ),
                                          ),
                                          shape: RoundedRectangleBorder(
                                            borderRadius: BorderRadius.circular(
                                              22.0,
                                            ),
                                          ),
                                          side: BorderSide.none,
                                          backgroundColor: Color(0xffE4DDD2),
                                        ),
                                      ],
                                    ),

                                    // SizedBox(height: 8),
                                    // Text('卡片内容部分，可以放置各种组件'),
                                    // SizedBox(height: 8),
                                    // Align(
                                    //   alignment: Alignment.centerRight,
                                    //   child: TextButton(
                                    //     onPressed: () {},
                                    //     child: Text('我是按钮'),
                                    //   ),
                                    // ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                          SliverPadding(
                            padding: const EdgeInsets.all(10.0),
                            sliver: SliverFixedExtentList(
                              itemExtent: 70.0, //item高度或宽度，取决于滑动方向
                              delegate: SliverChildBuilderDelegate((
                                BuildContext context,
                                int index,
                              ) {
                                return ListTile(title: Text('Item $index'));
                              }, childCount: 10),
                            ),
                          ),
                        ],
                      );
                    },
                  ),
                ),

                SafeArea(
                  top: false,
                  bottom: false,
                  child: Builder(
                    builder: (BuildContext context) {
                      return CustomScrollView(
                        key: Key('menu2'),
                        slivers: <Widget>[
                          SliverOverlapInjector(
                            handle:
                                NestedScrollView.sliverOverlapAbsorberHandleFor(
                                  context,
                                ),
                          ),
                          SliverPadding(
                            padding: const EdgeInsets.all(10.0),
                            sliver: SliverFixedExtentList(
                              itemExtent: 50.0, //item高度或宽度，取决于滑动方向
                              delegate: SliverChildBuilderDelegate((
                                BuildContext context,
                                int index,
                              ) {
                                return ListTile(title: Text('Ite22m $index'));
                              }, childCount: 30),
                            ),
                          ),
                        ],
                      );
                    },
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class MyCustomPreferredSizeWidget extends StatelessWidget
    implements PreferredSizeWidget {
  final TabController message;

  MyCustomPreferredSizeWidget({Key? key, required this.message})
    : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 实现你的组件构建逻辑
    return Container(
      height: 52,
      // 使用首选高度
      alignment: AlignmentDirectional.center,
      width: double.infinity,
      color: Color(0xFF3b3633),
      padding: const EdgeInsets.all(10),

      child: ToggleSwitch(
        minWidth: 78.0,
        cornerRadius: 18.0,
        minHeight: 32.0,
        activeBorders: [Border.all(color: Color(0xFFECE9E1), width: 1.0)],
        activeBgColors: [
          [Color(0xFF1B1D1F)],
          [Color(0xFF1B1D1F)],
        ],
        activeFgColor: Color(0xFFFFD79E),
        inactiveBgColor: Color(0xFFECE9E1),
        inactiveFgColor: Color(0xFF1B1D1F),
        initialLabelIndex: 0,
        totalSwitches: 2,
        labels: ['展品', '展馆'],
        radiusStyle: true,
        onToggle: (index) {
          message.animateTo(index!);
          print('switched to: $index');
        },
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(32.0); // 指定首选高度
}
